<template>
	<view class="container">
		<van-nav-bar title="质量整改" placeholder fixed left-arrow @click-left="onClickLeft"></van-nav-bar>

		<van-form @submit="onSubmit" class="formClass">
			<van-cell-group>
				<van-field required v-model="rectificationCode" name="rectificationCode" label="整改编号" placeholder="请输入"
					:rules="[{ required: true, message: '请输入整改编号' }]" />
				<van-field  required v-model="problemDescription" name="problemDescription" label="问题描述" type='textarea'
					placeholder="请输入" :rules="[{ required: true, message: '请填写问题描述' }]" />
				<van-field required v-model="suggestion" name="suggestion" label="整改意见" type='textarea'
					placeholder="请输入" :rules="[{ required: true, message: '请填写整改意见' }]" />
				<van-field required v-model="deadline" is-link readonly name="deadline" label="整改时限" placeholder="请选择"
					@click="showPicker2 = true" :rules="[{ required: true, message: '请选择整改时限' }]" />
				<van-popup v-model:show="showPicker2" position="bottom">
					<van-date-picker v-model="currentDate" title="选择日期" :min-date="new Date(2020, 0, 1)"
						:max-date="new Date(2025, 5, 1)" @cancel="showPicker2 = false" @confirm="onConfirm2" />
				</van-popup>
				<van-field  required v-model="rectificationTime" is-link readonly name="rectificationTime" label="通知时间"
					placeholder="请选择" @click="showPicker3 = true" :rules="[{ required: true, message: '请选择通知时间' }]" />
				<van-popup  v-model:show="showPicker3" position="bottom">
					<van-picker-group title="通知时间" :tabs="['选择日期', '选择时间']" @confirm="onConfirm3"
						@cancel="showPicker3 = false">
						<van-date-picker v-model="currentDate2" :min-date="new Date(2020, 0, 1)"
							:max-date="new Date(2025, 5, 1)" />
						<van-time-picker v-model="currentTime" />
					</van-picker-group>
				</van-popup>
				<van-field  name="files" label="附件" :rules="[{ required: true, message: '请上传附件' }]">
					<template #input>
						<van-uploader :deletable='false' :show-upload='false' v-model="fileList"/>
					</template>
				</van-field>
			</van-cell-group>
			<div style="margin: 16px 0;">
				<van-button block type="primary" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</view>
</template>

<script setup lang="ts">
	import { showSuccessToast } from 'vant';
	import dayjs from 'dayjs';
	import { ref, onMounted, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { addQualityRectification} from '@/apis/qualityRectification.js';
	import { selectQualityById } from '@/apis/quality.js';
	const projectId = uni.getStorageSync("projectInfo").id

	//初始化时间
	const currentDate = ref([]);
	const currentDate2 = ref([]);
	const currentTime = ref([]);
	//弹出层状态
	const showPicker2 = ref(false);
	const showPicker3 = ref(false);

	//表单数据
	const rectificationCode = ref('')

	const problemDescription = ref('')
	const suggestion = ref('');
	const deadline = ref('');
	const rectificationTime = ref('')
	const filesId = reactive([])
	const fileList = ref([
		// { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
	]);
	const qualityid=ref(0)

	onLoad(({ qualityId }) => {
		qualityid.value=qualityId
		selectQualityById(qualityId).then(res => {
			let data = res.data
			problemDescription.value = data.qualityDescription
			rectificationTime.value = data.qualityTime
			currentDate2.value=data.qualityTime.split(' ')[0].split('-')
			currentTime.value=data.qualityTime.split(' ')[1].split(':')
			fileList.value = data.qualityFileList.map(e=>({url:e.filePath}))
			filesId.push(...data.qualityFileList.map(e=>e.id))
		})
	})

	onMounted(() => {
		getCurrentDateArray()
	});

	//获取当前日期
	const getCurrentDateArray = () => {
		const today = dayjs();
		const year = today.format('YYYY');
		const month = today.format('MM');
		const day = today.format('DD');
		const hour = today.format('HH');
		const minute = today.format('mm');
		currentDate.value = [year, month, day];
		currentDate2.value = [year, month, day];
		currentTime.value = [hour, minute]
	};

	//整改时限
	const onConfirm2 = ({ selectedOptions }) => {
		deadline.value = selectedOptions.reduce((a, c) => a === '' ? a + c.text : a + '-' + c.text, '')
		showPicker2.value = false;
	}

	//通知时间
	const onConfirm3 = (arr) => {
		rectificationTime.value = arr[0].selectedOptions.reduce((a, c) => a === '' ? a + c.text : a + '-' + c.text, '') + ' ' + arr[1].selectedOptions.reduce((a, c) => a === '' ? a + c.text : a + ':' + c.text, '')
		showPicker3.value = false;
	}

	//返回键
	const onClickLeft = () => {
		uni.navigateBack();
	};

	//提交表单
	const onSubmit = (values) => {
		let requestInfo = handleFormData(values)
		console.log(requestInfo);
		addQualityRectification(projectId, requestInfo).then(res => {
			if (res.code === 200) {
				showSuccessToast('提交成功')
				uni.navigateTo({
					url:'/pages/qualityRectification/qualityRectification'
				})
			}
		})
	}

	const handleFormData = (values) => {
		return {
			...values,
			fileIds: filesId,
			qualityUnitsId: uni.getStorageSync('SelfUserInfo').unitsId,
			qualityId:+qualityid.value,
			rectificationTime: rectificationTime.value.replace(" ", "T") + ":00Z"
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #eeeeee;

		.formClass {
			padding: 0 20rpx;
			display: flex;
			flex-direction: column;

			.title {
				padding: 10px;
				text-align: center;
			}

			.scroll {
				width: 100%;
				box-sizing: border-box;
				height: 100%;
				background-color: #fafafa;

				.card {
					width: 95%;
					margin: 0 auto;
					position: relative;
					margin-bottom: 20rpx;
					height: 200px;
					border-radius: 10rpx;
					display: flex;
					background-color: #ffffff;
					flex-direction: column;

					.lis {
						display: flex;
						flex: 1;
						align-items: center;
						text-indent: 20rpx;
						font-size: 14px;
						color: #7f7f7f;

						text {
							text-indent: 40rpx;
						}
					}

					.state {
						position: absolute;
						padding: 0 20rpx;
						text-align: center;
						line-height: 30px;
						border: 1px solid #ff6937;
						right: 10px;
						top: 10px;
						color: #ff6937;

						&.state-fail {
							color: #ff4d4f;
							border-color: #ff4d4f;
						}

						&.state-pass {
							color: #3086ff;
							border-color: #3086ff;
						}
					}
				}
			}
		}
	}
</style>